<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>科盾清朗 2018-2019 年会</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" />
    <style type="text/css">
        html,body{margin:0;padding:0;text-align:center;overflow:hidden;width:100%;height:100%}*{box-sizing:border-box}.section{width:100%;font-size:24px;overflow:hidden;position:relative}.section .title{line-height:100px;font-size:24px}#fullpage{visibility:hidden}.powered{font-size:20px;color:#454545;margin-top:20px}.section-main{position:absolute;top:50%;margin-top:-150px;width:100%;text-align:center}a{text-decoration:none}#demo0{width:160px;overflow:hidden;border:1px solid #ccc;text-indent:10px;margin:0 auto}#demo0 ul{list-style:none;padding:0;margin:0;width:100%;text-align:left}#demo0 li{padding:0 10px;height:40px;line-height:40px;border-bottom:1px solid #ccc;border-top:1px solid #fff;background-color:#fafafa;font-size:14px}#demo1{height:210px;width:220px;margin:0 auto;text-align:center}
    </style>
    <style>
        *{box-sizing:border-box}.progress{width:100%;font-size:0;white-space:nowrap;position:fixed;bottom:0;height:4px;background-color:#ccc}.progress-items{width:100%;z-index:2;height:4px;position:absolute}.progress-rate{width:0;z-index:1;position:absolute;height:4px;background-color:#00abeb;transition:all .5s ease}
    </style>
    <script type="text/javascript">
        (function(){

            // 动态设置meta标签的方法倍数
            let scale = 1 / devicePixelRatio;
            //document.querySelector('meta[name="viewport"]').setAttribute('content','initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
             // 动态设置根节点的字体大小
            function getSize(){
                let html = document.documentElement || document.getElementsByTagName('html')[0];
                let htmlWidth = html.clientWidth;
                let fontSize = htmlWidth/15;
                html.style.fontSize = fontSize + 'px';

                return fontSize;
            }
            getSize();
            window.addEventListener('resize',getSize);
      })();
    </script>
    <link href="asset/animate.min.css" rel="stylesheet" />

    <!-- 自定义样式 -->
    <link href="css/kedun.css" rel="stylesheet" />
    <link href="css/kedun-1.css" rel="stylesheet" />
    <link href="css/kedun-2.css" rel="stylesheet" />
</head>
<body>

    <!-- fullpage -->
    <div id="fullpage" class="site__header">

        <!-- 第一屏 首页 -->
        <div class="section section-page section-1">
            <!-- <div class="section-main">
                <div class="title animated" data-delay="100" data-show="flipInY"  data-hide="flipOutY" >Powerful Features</div>
                <div data-delay="400"  class="animated" data-show="zoomIn"  data-hide="zoomOut"><img src="asset/power.png"></div>
            </div> -->
            <div class="section-box section-box-1 animated" data-show="fadeIn" data-hide="fadeOut">
                
                <!-- 上面花 -->
                <section class="s1-flower-top">
                    <img src="./images/1/floor-left.png" class="s1-flower-tl animated" data-delay="100"  data-show="rotateInDownRight" data-hide="fadeOut"/>
                    <img src="./images/1/floor-right.png" class="s1-flower-tr animated" data-delay="100" data-show="rotateInDownLeft" data-hide="fadeOut"/>
                </section>

                <!-- 中间圆 -->
                <section class="s1-circle-center ">
                    
                    <div class="s1-circle animated" data-delay="100" data-show="zoomIn" data-hide="zoomOut">
                        <div class="s1-circle-inner"></div>
                    </div>
                    
                    <img src="./images/1/yqh.png" class="s1-title-1 animated" data-delay="550" data-show="fadeInDown" />
                    <img src="./images/1/e.png" class="s1-title-2 animated" data-delay="550" data-show="fadeInUp" />
                    <span class="s1-line animated" data-delay="550" data-show="zoomIn"></span>
                    <img src="./images/1/e-text.png" class="s1-title-3 animated" data-delay="550" data-show="fadeInLeft"/>
                    <img src="./images/1/nianhui.png" class="s1-title-4 animated" data-delay="550" data-show="fadeInRight"/>
                    <img src="./images/1/gd-sz.png" class="s1-title-5 animated" data-delay="550" data-show="fadeInDown"/>
                    <img src="./images/1/date.png" class="s1-title-6 animated" data-delay="650" data-show="fadeInDown"/>

                </section> 
                
                <!-- 下面花 -->
                <section class="s1-flower-bottom">
                    <img src="./images/1/floor-lb.png" class="s1-flower-bl animated" data-delay="100"  data-show="rotateInDownRight" data-hide="rotateOutDownRight"/>
                    <img src="./images/1/floor-rb.png" class="s1-flower-br animated" data-delay="100"  data-show="rotateInDownLeft" data-hide="rotateOutDownLeft"/>
                </section>
                
            </div>
        </div>



        <!-- 第二屏 -->
        <div class="section section-page section-2">
            <div class="section-box section-box-2 animated" data-show="fadeIn" data-hide="fadeOut">

                <!--上面花-->
                <section class="s2-flower-top">
                    <img src="./images/2/floor-tl.png" class="s2-flower-tl animated" data-delay="100" data-show="rotateInDownLeft" data-hide="rotateOutDownRight">
                    <img src="./images/2/floor-tr.png" class="s2-flower-tr animated" data-delay="100" data-show="rotateInDownRight" data-hide="rotateOutDownLeft">
                </section>

                <!--中间框-->
                <section class="s2-content">
                       
                        <div class="s2-c-bg animated" data-show="fadeInUp" data-hide="fadeOutUp"></div>

                        <img src="./images/2/invitation.png" class="s2-img-invatation s2-img-invatation-top animated" data-delay="450" data-show="fadeInDown"/>
                        <img src="./images/2/welcome.png" class="s2-img-title animated" data-delay="300" data-show="fadeInDown"/>
                        <div class="s2-main-content">
                            <p class="s2-title-3 s2-title-word animated" data-delay="300" data-show="fadeInLeft" >尊敬的各位先生/女士：</p>
                            <p class="s2-title-4 s2-title-word animated" data-delay="550" data-show="fadeIn">
                                历史即将翻开崭新的一页，我们也将迎来充满希望和更具挑战性的2019年。怀着美好的憧憬，带着新年的祝福，我们即将迎来公司一年一度的年会，在全体同仁共同联欢的同时也诚邀您参与我们的晚宴，分享我们的快乐，再创新的辉煌！
                            </p>
                            <img src="./images/2/logo.png" class="s2-title-5 animated" data-delay="600" data-show="fadeIn"/>
                            <p class="s2-title-6 s2-title-word animated" data-delay="400" data-show="fadeInRight">2018年12月20日</p>
                        </div>
                        
                        <img src="./images/2/invitation.png" class="s2-img-invatation-bottom s2-img-invatation animated" data-delay="600" data-show="fadeInUp">
                        
                </section>

                <!--下面花-->
                <section class="s2-flower-bottom">
                    <img src="./images/2/floor-lb.png" class="s2-flower-bl animated" data-delay="100" data-show="rotateInUpRight" data-hide="rotateOutUpLeft">
                    <img src="./images/2/floor-rb.png" class="s2-flower-br animated" data-delay="100" data-show="rotateInUpLeft" data-hide="rotateOutUpRight">
                </section>

            </div>
        </div>


        <!-- 第三屏 -->
        <div class="section section-page section-3">
            <div class="section-box section-box-3 animated" data-show="fadeIn" data-hide="fadeOut">
                
                <!-- 顶部花 -->
                <section class="s3-flower-top">
                    <img src="./images/3/flower-tl.png" class="s3-flower-tl animated" data-show="rotateInDownLeft" data-hide="rotateOutDownRight"/>
                    <img src="./images/3/flower-tr.png" class="s3-flower-tr animated" data-show="rotateInDownRight" data-hide="rotateOutDownLeft"/>
                </section>

                <!-- 中部内容 -->
                <section class="s3-content animated">
                    
                    <!-- 背景 -->
                    <div class="s3-c-bg animated" data-show="fadeInUp" data-show="fadeOutUp"></div>

                    <img src="./images/3/invitation.png" class="s3-img-invatation s3-img-invatation-top animated" data-delay="450" data-show="fadeInDown" />
                    <img src="./images/3/nhlc.png" class="s3-img-title animated" data-delay="300" data-show="fadeInDown" />

                    <!-- 日期安排 -->
                    <div class="s3-date-arrange">
                        <div class="s3-time-column">
                            <span class="s3-time-time s3-time-time-1 animated" data-delay="300" data-show="fadeInRight">16:30-17:00</span>
                            <span class="s3-time-time s3-time-time-2 animated" data-delay="400" data-show="fadeInRight">17:30-18:00</span>
                            <span class="s3-time-time s3-time-time-3 animated" data-delay="500" data-show="fadeInRight">18:00-19:15</span>
                            <span class="s3-time-time s3-time-time-4 animated" data-delay="600" data-show="fadeInRight">19:00-21:00</span>
                            <span class="s3-time-time s3-time-time-5 animated" data-delay="700" data-show="fadeInRight">21:00-22:00</span>
                        </div>
                        <div class="s3-dot-column">
                            <span class="s3-dot s3-dot-1 animated" data-delay="500" data-show="zoomIn"></span>
                            <span class="s3-dot s3-dot-2 animated" data-delay="600" data-show="zoomIn"></span>
                            <span class="s3-dot s3-dot-3 animated" data-delay="700" data-show="zoomIn"></span>
                            <span class="s3-dot s3-dot-4 animated" data-delay="800" data-show="zoomIn"></span>
                            <span class="s3-dot s3-dot-5 animated" data-delay="900" data-show="zoomIn"></span>
                        </div>
                        <div class="s3-text-column">
                            <span class="s3-text s3-text-1 animated" data-delay="300" data-show="fadeInLeft">集合点名，前往酒店</span>
                            <span class="s3-text s3-text-2 animated" data-delay="400" data-show="fadeInLeft">酒店签到、 拍照、入席</span>
                            <span class="s3-text s3-text-3 animated" data-delay="500" data-show="fadeInLeft">主持人开场，领导致辞，嘉宾发言，回顾展望，优秀员工表彰</span>
                            <span class="s3-text s3-text-4 animated" data-delay="600" data-show="fadeInLeft">自助晚餐，游戏互动， 抽奖活动</span>
                            <span class="s3-text s3-text-5 animated" data-delay="700" data-show="fadeInLeft">集体合影，自行活动</span>
                        </div>
                    </div>

                    <img src="./images/3/invitation.png" class="s3-img-invatation s3-img-invatation-bottom animated" data-delay="600" data-show="fadeInUp"/>
                    
                </section>

                <!-- 底部花 -->
                <section class="s3-flower-bottom">
                    <img src="./images/3/flower-lb.png" class="s3-flower-lb animated" data-show="rotateInUpRight" data-hide="rotateOutUpLeft"/>
                    <img src="./images/3/flower-rb.png" class="s3-flower-rb animated" data-show="rotateInUpLeft" data-hide="rotateOutUpRight"/>
                </section>

            </div>
        </div>

        <!-- 第四屏 -->
        <div class="section section-page section-4">
             <div class="section-box section-box-4">

                <!-- 顶部花 -->
                <section class="s4-flower-top">
                    <img src="./images/3/flower-tl.png" class="s4-flower-tl animated" data-show="rotateInDownLeft" data-hide="rotateOutDownRight" />
                    <img src="./images/3/flower-tr.png" class="s4-flower-tr animated" data-show="rotateInDownRight" data-hide="rotateOutDownLeft" />
                </section>


                <!--中间内容-->
                <section class="s4-content">
                    <!-- 背景 -->
                    <div class="s4-c-bg animated" data-show="fadeInUp" data-hide="fadeOutUp"></div>
                    <img src="./images/3/invitation.png" class="s4-img-invatation s4-img-invatation-top animated" data-delay="450" data-show="fadeInDown"/>
                    <img src="./images/4/title.png" class="s4-img-title animated" data-delay="300" data-show="fadeInDown" />

                    <div class="s4-main-content">
                        <div class="s4-map animated" data-delay="100" data-show="zoomIn"></div>
                        <p class="s4-title-3 s4-title-word animated" data-delay="100" data-show="fadeInUp">-<span class="s4-title-3-ab">地点</span>-</p>
                        <img src="./images/4/address.png" class="s4-title-4 animated" data-delay="300" data-show="fadeInUp">
                        <p class="s4-title-3 s4-title-word animated" data-delay="500" data-show="fadeInUp">-<span class="s4-title-3-ab">时间</span>-</p>
                        <img src="./images/4/date.png" class="s4-title-5 animated" data-delay="700" data-show="fadeInUp">
                        <img src="./images/4/time.png" class="s4-title-6 animated" data-delay="900" data-show="fadeInUp">
                    </div>

                    <img src="./images/2/invitation.png" class="s4-img-invatation-bottom s4-img-invatation animated" data-delay="600" data-show="fadeInUp">
                </section>

                <!-- 底部花 -->
                <section class="s4-flower-bottom">
                    <img src="./images/3/flower-lb.png" class="s4-flower-bl animated" data-show="rotateInDownLeft" data-hide="rotateOutDownRight"/>
                    <img src="./images/3/flower-rb.png" class="s4-flower-br animated" data-show="rotateInDownRight" data-hide="rotateOutDownLeft"/>
                </section>
            </div>
        </div>

        <!-- 第五屏 -->
        <div class="section section-page section-5">

            <div class="section-box section-box-5">

                <!-- 顶部花 -->
                <section class="s5-flower-top">
                    <img src="./images/3/flower-tl.png" class="s5-flower-tl animated" data-show="rotateInDownLeft" data-hide="rotateOutDownRight" />
                    <img src="./images/3/flower-tr.png" class="s5-flower-tr animated" data-show="rotateInDownRight" data-hide="rotateOutDownLeft" />
                </section>


                <!--中间内容-->
                <section class="s5-content">
                    <!-- 背景 -->
                    <div class="s5-c-bg animated" data-show="fadeInUp" data-hide="fadeOutUp"></div>
                    <img src="./images/3/invitation.png" class="s5-img-invatation s5-img-invatation-top animated" data-delay="450" data-show="fadeInDown" />

                    <!--中间内容-->
                    <div class="s5-main-content">
                        <img src="./images/5/2019.png" class="s5-img-1">
                        <img src="./images/5/future.png" class="s5-img-2">
                        <img src="./images/5/new.png" class="s5-img-3">
                        <img src="./images/5/welcome.png" class="s5-img-4">
                    </div>


                    <img src="./images/2/invitation.png" class="s5-img-invatation-bottom s5-img-invatation animated" data-delay="600" data-show="fadeInUp">
                </section>

                <!-- 底部花 -->
                <section class="s5-flower-bottom">
                    <img src="./images/3/flower-lb.png" class="s5-flower-bl animated" data-show="rotateInDownLeft" data-hide="rotateOutDownRight"/>
                    <img src="./images/3/flower-rb.png" class="s5-flower-br animated" />
                </section>
            </div>  
        </div>


    </div>


    <!-- 底部进度条 -->
    <div id="progress" class="progress">
        <div class="progress-rate"></div>
        <div class="progress-items"></div>
    </div>
    
    <!-- 脚本 -->
    <script src="./js/transform.js"></script>
    <script src="./js/alloy_touch.js"></script>
    <script src="./js/alloy_touch.full_page.js"></script>
    <script src="./js/progress_bar.js"></script>
    
    <!-- 自定以脚本 -->
    <script type="text/javascript" src="./js/kedun-1.js"></script>
    <script type="text/javascript" src="./js/kedun-2.js"></script>

    <!-- 全屏滚动函数 -->
    <script>
        
        var pb;
        var fp =  new AlloyTouch.FullPage("#fullpage",{
            animationEnd: function () {

            },
            leavePage: function (index) {
               console.log("leave" + index)
            },
            beginToPage: function (index) {
               console.log("to" + index);
               pb.to(index / (this.length-1));
            }
        });
        pb = new ProgressBar("#progress",fp.length-1)

    </script>

</body>